﻿@model Easy.CMS.List.ViewModel.ListTops_Common_ViewModel
@using Easy.Web.CMS.Data;
@using Newtonsoft.Json;
@using Newtonsoft.Json.Linq;
@{
    Script.Reqiured("List").AtHead();

    if (!Model.Widget.DetailPageUrl.IsNullOrEmpty())
    {
        Model.Widget.DetailPageUrl = Url.Content(Model.Widget.DetailPageUrl);
    }
}

<style type="text/css">
    #banner {
        position: relative;
        width: 478px;
        height: 286px;
        border: 1px solid #666;
        overflow: hidden;
    }

    #banner_list img {
        border: 0px;
    }

    #banner_bg {
        position: absolute;
        bottom: 0;
        background-color: #000;
        height: 30px;
        filter: Alpha(Opacity=30);
        opacity: 0.3;
        z-index: 1000;
        cursor: pointer;
        width: 478px;
    }

    #banner_info {
        position: absolute;
        bottom: 3px;
        height: 22px;
        color: #fff;
        z-index: 1001;
        cursor: pointer;
        text-align:center;
        margin:0 auto;
    }

    #banner_text {
        position: absolute;
        width: 120px;
        z-index: 1002;
        right: 3px;
        bottom: 3px;
    }

    #banner ul {
        position: absolute;
        list-style-type: none;
        filter: Alpha(Opacity=80);
        opacity: 0.8;
        z-index: 1002;
        margin: 0;
        padding: 0;
        bottom: 30px;
        right: 5px;
    }

        #banner ul li {
            padding: 0px 8px;
            float: left;
            display: block;
            color: #FFF;
            background: #6f4f67;
            cursor: pointer;
            border: 1px solid #333;
        }

            #banner ul li.on {
                background-color: #000;
            }

    #banner_list a {
        position: absolute;
    }

</style>

<script type="text/javascript">
   var t = n =0, count;
   $(document).ready(function () {
       count = $("#banner_list a").length;
       $("#banner_list a:not(:first-child)").hide();
       $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
       $("#banner_info").click(function () { window.open($("#banner_list a:first-child").attr('href'), "_blank") });
       $("#banner li").click(function () {
           var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
           n = i;
           if (i >= count) return;

           $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
           $("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr('href'), "_blank") })
           $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

           document.getElementById("banner").style.background = "";
           $(this).toggleClass("on");
           $(this).siblings().removeAttr("class");
       });

       t = setInterval("showAuto()", 4000);

       $("#banner").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });

   });

   function showAuto() {
    n = n >= (count - 1) ? 0 : ++n;
    $("#banner li").eq(n).trigger('click');
}

</script>

<div id="listCarousel">
@{
    string width = @Model.Widget.Width.IsNullOrEmpty() ? "478px" : @Model.Widget.Width + "px";
    string height = @Model.Widget.Height.IsNullOrEmpty() ? "286px" : @Model.Widget.Height + "px";
    <div id="banner" style="width:@width;height:@height">
        <div id="banner_bg" style="width:@width;height:@height"></div>
        
        <!--标题背景-->
        <div id="banner_info" style="width:@width;"></div>

        @if (!Model.JsonResult.IsNullOrEmpty() && Model.Columns != null && Model.Columns.Count > 0)
       {
          var data = Json.Decode(Model.JsonResult);
          int count = 1;
          string addClass = count == 1 ? "on" : "";
          JObject attrs =null;
          string url = string.Empty;
          <!--标题-->
          <ul>
              @foreach (var item in data)
              {
                  <li class="@addClass">@count</li>
                  count++;
              }
          </ul>

          <div id="banner_list">
               @foreach (var item in data)
              {
                 string Id = item["Id"].ToString();
                 string title = !Model.Columns[0].IsNullOrEmpty() ? @item[Model.Columns[0]] : string.Empty;
                 string formImg = item["formimg"];

                 object img = JsonConvert.DeserializeObject(formImg) != null ? JsonConvert.DeserializeObject(formImg) : null;

                 JArray thumbail = (JArray)img != null ?
                     ((JArray)img)[0] != null ?
                     ((JArray)img)[0][Model.Columns[1]] != null ?
                     (JArray)((JArray)img)[0][Model.Columns[1]] : null : null : null;
                 if (thumbail != null && thumbail.Count > 0)
                     attrs = thumbail[0]["picThumAddress"] != null && thumbail[0]["picThumAddress"].Count() > 0 ?
                              thumbail[0]["picThumAddress"][0] != null ?
                              (JObject)thumbail[0]["picThumAddress"][0] != null ?
                              (JObject)thumbail[0]["picThumAddress"][0] : new JObject() : new JObject() : new JObject();
                 url = attrs != null && attrs["fileId"]!=null ? "/FilePreview/Image/" + attrs["fileId"] : string.Empty;
                 string style = attrs != null && attrs["height"] != null ? "height:" + attrs["height"] + "px;" : string.Empty;
                 style += attrs != null && attrs["width"] != null ? "width:" + attrs["width"] + "px;" : string.Empty;   
                 <a href="@Url.PathContent(Url.ListDetailUrl(Model.Widget.DetailPageUrl, Id))" target="_blank"><img src="@url" title="@title" style="@style" alt="@title" /></a>
              }
          </div>
        }
    </div>
}
</div>